<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <el-select
        size="mini"
        style="width: 200px; margin-right :10px; font-size:13px; "
        v-model="params.name"
        placeholder="请选择科室"
      >
        <el-option
            v-for="item in Departments"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id">
        </el-option>
      </el-select>
      <el-button size="mini" type="info" @click="findBySearch()" plain>查询</el-button>
      <el-button size="mini" type="warning" @click="reset()" plain>重置</el-button>
    </div>

    <!--  医生列表  -->
    <div class="search" style="margin-top: 10px ;">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in tableData">
          <div class="grid-content bg-purple" style="background-color: #ecf8fd ;">
            <div style="text-align: center; height: 370px; padding: 15px">
              <!-- 头像 -->
              <img
                :src="item.headPhoto"
                style="width:100px ; height:100px ; border-radius: 50% ; text-align:center;"
              />
              <!-- 姓名 -->
              <div style="margin-top: 15px;">
                <span style="font-weight: 700;">{{ item.username }}</span>
                - {{ item.departmentName }}
              </div>

              <!-- 简介 -->
              <div style="margin: 30px 15px 0 30px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;">简介: &nbsp;<span style="font-weight:300">{{ item.intro }}</span></div>
              <!-- 挂号费 -->
              <div style="float: left; margin-left:60px ; margin-top: 15px;">
                挂号费:
                <span
                  style="color: red; font-size :18px ; font-weight:700"
                >&nbsp; ￥ {{ item.fee }}</span>
              </div>
              <!-- 数量 -->
              <div style="margin-top: 15px;">剩余: &nbsp; {{ item.num }}</div>

              <!-- 挂号按钮 -->
              <div style="margin-top: 10px;">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(item)"
                >挂号</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--  挂号预约时间表单  -->
    <el-dialog title="预约挂号表" :visible.sync="dialogFormVisibleUpdate">
      <el-form
          :model="updateForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="预约时间" prop="creatTime">
          <el-date-picker
              v-model="updateForm.time"
              style="width: 100%;"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择预约的日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Cancel()">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div style="margin-top:10px; float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[4,8, 12]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "AppointmentView",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      params: {
        name: "",
        pageNum: 1,
        pageSize: 4
      },
      total: 0,
      tableData: {},
      Departments:{},
      updateForm:{},
      dialogFormVisibleUpdate : false,
      rules: {
        Time: [{ required: true, message: "请选择预约时间", trigger: "change" }]
      },
    };
  },
  //生命周期钩子
  created() {
    //查询全部
    this.findBySearch();
    this.findDepartments()
  },
  methods: {
    // 条件查询
    findBySearch() {
      request
        .get("/Appointment/findBySearch", { params: this.params })
        .then(res => {
          if (res.data && res.data.list) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            console.log(this.tableData);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          console.error("Error occurred while fetching data:", error);
        });
    },

    //查询科室
    findDepartments(){
      request.get("/Administrative/getAll").then(res => {
        if (res.data){
          console.log(res)
          this.Departments = res.data;
          console.log(this.Departments)
        }else {
          this.$message.error(res.msg);
        }
      }).catch(error => {
        console.error("Error occurred while fetching data:", error);
      });
    },

    //重置
    reset() {
      this.params.name = "";
      this.findBySearch();
    },

    //分页
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.findBySearch();
    },

    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },


    //挂号按钮
    handleEdit(item){
      this.updateForm.id = item.id
      if (this.user.role === 'DOCTOR'){
        this.$message.warning("医生不能挂号!");
        return;
      }
      if (this.user.role === 'ADMIN'){
        this.$message.warning("管理员不能挂号!");
        return;
      }
      this.dialogFormVisibleUpdate = true;

    },

    //挂号中确定按钮
    update(){
      console.log(this.updateForm)
      request.post("/Appointment/update",this.updateForm).then(res => {
        if (res.code == 200){
          this.$message({
            message: "挂号成功!",
            type: "success"
          });
          this.dialogFormVisibleUpdate = false;
          this.findBySearch();
        }else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
        console.log(res);
      })
    },

    //挂号中取消按钮
    Cancel(){
      this.dialogFormVisibleUpdate = false;
      this.updateForm = {}
    },
  }
};
</script>
<style scoped>
.search {
  width: 100%;
  box-shadow: 1px 0 6px rgba(0, 21, 41, 0.25);
  border-radius: 5px;
  padding: 15px 0 15px 10px;
}
</style>
